
<template>
  <div class="product-detail-container">
    <el-row>
      <el-col :span="24"
        ><div class="title">
          <h1 style="text-align: left">商品详情页</h1>
        </div>
      </el-col>
    </el-row>
    <el-row class="main">
      <el-col :span="8" class="imgLeft"
        ><div class="left-img">
          <img :src="detailData.imgUrl" alt="" /></div
      ></el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple-light right-detail">
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light">
                <h1>{{ detailData.name }}</h1>
                <div class="price">{{ detailData.price }}</div>
                <div class="phoneType-Time">
                  <div class="phoneType">
                    手机类型：{{ detailData.phoneType }}
                  </div>
                  <div class="publishTime">发布时间：2022-09-01</div>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row class="canshuCard">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light canshu-card">
                      <div class="left-icon">
                        <i class="iconfont">&#xe617;</i>
                      </div>
                      <div class="right-canshu">
                        <div class="canshuName">中央处理器</div>
                        <div class="canshu">{{ detailData.CPU }}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light canshu-card">
                      <div class="left-icon">
                        <i class="iconfont">&#xe68e;</i>
                      </div>
                      <div class="right-canshu">
                        <div class="canshuName">运行内存</div>
                        <div class="canshu">{{ detailData.RAM }}</div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light canshu-card">
                      <div class="left-icon">
                        <i class="iconfont">&#xe60d;</i>
                      </div>
                      <div class="right-canshu">
                        <div class="canshuName">屏幕尺寸</div>
                        <div class="canshu">{{ detailData.size }}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light canshu-card">
                      <div class="left-icon">
                        <i class="iconfont">&#xe608;</i>
                      </div>
                      <div class="right-canshu">
                        <div class="canshuName">电池容量</div>
                        <div class="canshu">{{ detailData.battery }}</div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="detail">
      <div class="grid-content bg-purple-dark canshu-card">
        <div class="left-icon"><i class="iconfont">&#xe61c;</i></div>
        <div class="right-canshu">
          <div class="canshuName">存储空间</div>
          <div class="canshu">{{ detailData.ROM }}</div>
        </div>
      </div>
      <div class="grid-content bg-purple-dark canshu-card">
        <div class="left-icon"><i class="iconfont">&#xe606;</i></div>
        <div class="right-canshu">
          <div class="canshuName">充电功率</div>
          <div class="canshu">{{ detailData.charge }}</div>
        </div>
      </div>
      <div class="grid-content bg-purple-dark canshu-card">
        <div class="left-icon"><i class="iconfont">&#xe60b;</i></div>
        <div class="right-canshu">
          <div class="canshuName">指纹解锁</div>
          <div class="canshu">{{ detailData.fingerprint }}</div>
        </div>
      </div>
      <div class="grid-content bg-purple-dark canshu-card">
        <div class="left-icon"><i class="iconfont">&#xe7a5;</i></div>
        <div class="right-canshu">
          <div class="canshuName">面容ID</div>
          <div class="canshu">{{ detailData.faceId }}</div>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detailData: {},
    };
  },
  mounted() {
    this.detailData = this.$route.params.val;
  },
};
</script>

<style lang="less" scoped>
.product-detail-container {
  background-color: #fff;
}
.title {
  padding: 0;
  margin: 0;
  height: 60px;
  h1 {
    color: rgb(91, 91, 91);
    background-color: #f8f8f8;
    font-size: 40px;
    font-weight: 500;
    padding-left: 30px;
  }
}
.imgLeft {
  padding-top: 50px;
}
.left-img {
  height: 100%;
  width: 250px;
  margin: auto 30px;
  overflow: hidden;
  img {
    height: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.right-detail {
  text-align: left;
  h1 {
    padding: 20px 0;
    border-bottom: 1px solid rgb(220, 220, 220);
  }
  .price {
    color: orangered;
    font-size: 25px;
    margin: 5px 0;
  }
  .phoneType-Time {
    height: 40px;
    .phoneType {
      margin: 5px 0;
      float: left;
      margin-right: 20px;
    }
    .publishTime {
      float: left;
      margin: 5px 0;
    }
  }
  .canshu-card {
    height: 100px;
    display: flex;
    align-items: center;
    border: 1px solid rgb(194, 192, 253);

    background-color: #ecf3fd;
    margin: 5px;
    padding-left: 20px;
  }
  .left-icon {
    height: 60px;
    width: 60px;
    margin: auto 5px;
    i {
      font-size: 60px;
      color: #5fa7ff;
    }
  }
  .right-canshu {
    height: 60px;
    // width: 210px;
    margin: auto 5px;
    .canshuName {
      margin: 5px 0;
      color: #5fa7ff;
    }
    .canshu {
      font-size: 14px;
      color: rgb(0, 0, 0);
    }
  }
}

.detail {
  padding: 50px 0 100px 0;
  display: flex;
  justify-content: space-between;

  .canshu-card {
    display: flex;
    align-items: center;
    height: 100px;
    border: 1px solid rgb(253, 221, 192);
    width: 250px;
    background-color: #fdf1ec;
  }
  .left-icon {
    height: 60px;
    width: 60px;
    margin: auto 5px;
    i {
      font-size: 60px;
      color: #ffa45f;
    }
  }
  .right-canshu {
    height: 60px;
    width: 210px;
    margin: auto 5px;
    text-align: left;

    .canshuName {
      margin: 5px 0;
      color: #ff9f5f;
    }
    .canshu {
      font-size: 14px;
      color: rgb(0, 0, 0);
    }
  }
}
</style>